revision:
The property returns a collection (list) of an elements's child nodes, i.e. a NodeList object and is read-only.
"childNodes[0]" is the same as firstChild.
Syntax:
element.childNodes : a NodeList object collection of nodes. The nodes are sorted as they appear in the document.
property value:
none :
example
DIV2's child nodes are :
number of child nodes in DIV2 :
<div>
<p>DIV2's child nodes are : <span id="prop7"></span></p>
<p>number of child nodes in DIV2 : <span id="prop8"></span></p>
</div>
<script>
const nodeList = document.getElementById("DIV2").childNodes;
let text1 = "";
for (let i = 0; i < nodeList.length; i++) {
text1 += nodeList[i].nodeName + " , ";
}
document.getElementById("prop7").innerHTML = text1;
const element = document.getElementById("DIV2");
let numb2 = element.childNodes.length;
document.getElementById("prop8").innerHTML = numb2;
</script>
First p element
Second p element
Add a background color to the second child node of the div.
Whitespace inside elements is considered text nodes. In this example, index 0, 2 and 4 in myDIV are text nodes.
<div>
<div id="DIV3">
<p>First p element</p>
<p>Second p element</p>
</div>
<p>Add a background color to the second child node of the div.</p>
<p>Whitespace inside elements is considered text nodes. In this example,
index 0, 2 and 4 in myDIV are text nodes.</p>
</div>
<style>
#DIV3{border: 1px solid black; margin: 5px;}
</style>
<script>
document.getElementById("DIV3").childNodes[1].style.backgroundColor = "yellow";
</script>